<template>
	<div class="sui">
		<div class="navbar navbar-inverse navbar-fixed-top" id="navbar" >
			<mt-header title="发现" style="font-size: 18px; background-color: #FFD700; color: #000000;">
			</mt-header>
		</div>
		<div >
			<div class="list">
				<header>
					<h3><i class="icon-list-ul"></i> 美食评论动态 <small>更新20条</small></h3>
				</header>
				<div class="items items-hover">
					<div class="item" v-for="(message,index) in messages" :key="index">
						<div class="item-heading"><br>
							<h4><span class="label label-warning">{{message.numerator|tab}}</span>{{message.profileName}}
							<span class="text-muted" v-rainbow>@{{message.productId}}</span>
							</h4>
							<h6>评分 ：<span style="color: goldenrod;">{{message.score}}</span>&nbsp;
							服务 ：<span style="color: goldenrod;">{{message.denominator}}</span>
							</h6>
							<div class="item-content">
								<div class="text">“ {{message.summary}} ”</div>
							</div>
						</div>
					</div>
				</div><br><br>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "newpage",
		data() {
			return {
				messages: []
			}
		},
		created(){
				var url = 'http://localhost:8081/foodCommo/comment/getAllComment.action';
				this.$axios.get(url).then(
					res => {
						this.messages = res.data.slice(0,20)
						// console.log(this.messages)
					},
					err => {
						console.log(err)
					})
			}
		
		}
</script>

<style scoped="scoped">
	.sui{
		margin-top: 50px;
	}
	.kou{
		width: 350px;
		height: 100px;
		border-radius: 10px;
		margin-top: 5px;
		margin-left: 10px;
	}
	li{
		text-decoration: none;
		list-style: none;
	}
	.tab {
		background: #008000;
		color: #fff;
		border-radius: 10%;
		width: 50px;

	}
	.top{
		background: red ;
		color:#fff;
		border-radius: 10%;
		}
	img {
		width: 50px;
		height: 50px;
	}
	#navbar{
		height: 30px;
	}
</style>
